<template>
    <div class="demo">
        <div class="demo-warp">
            <div class="demo-flex" v-for="(v,k) in getList" :key="k">
                <span class="demo-title">{{v.title}}</span>
                <div class="demo-content">
                    <div class="demo-tab" :class="isShow ? 'demo-hide' : ''">
                        <span
                            v-for="(val, key) in v.childer"
                            :key="key"
                            :class="{'demo-active': val.active}"
                            @click="tabClick(val,key,k)"
                        >{{val.value}}</span>
                    </div>
                </div>
                <div class="demo-more" @click="isShow = !isShow" v-if="v.childer.length >= 14">更多</div>
            </div>
        </div>
        <div class="result-box">
            <span v-for="(item,index) in newArray" :key="index">{{item.value}}</span>
        </div>
    </div>
</template>
<script>
export default {
    data() {
        return {
            isShow: false,
            newArray: []
        };
    },
    props: {
        getList: {
            type: Array,
            default: () => []
        }
    },
    methods: {
        tabClick(data, key, k) {
            // 添加 active ==> true 显示 `active样式`
            console.log(key, k);
            if (key != 0) {
                this.getList[k].childer[0].active = false;
                this.getList[k].childer[key].active = !this.getList[k].childer[
                    key
                ].active;
            } else {
                for (let i = 0; i < this.getList[k].childer.length; i++) {
                    this.getList[k].childer[i].active = false;
                }
                this.getList[k].childer[0].active = true;
            }

			// 选中的数据
			console.log(this.getList[k].title)
            this.newArray = [];
            this.getList.map(data => {
                data.childer.map(item => {
                    if (item.active == true) {
						let result={}
						result.value=this.getList[k].title+""+item.value
                        this.newArray.push(result);
                    }
                });
            });
            console.log(this.newArray);
        }
    }
};
</script>

<style scoped>
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html,
body,
section {
    width: 100%;
    height: 100%;
}

[v-clock] {
    display: none;
}

section {
    display: flex;
    flex-direction: column;
}

/* 过滤列表:start */
.demo {
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    margin-bottom: 15px;
    min-height: 140px;
    height: auto !important;
    height: 140px;
}

.demo-warp {
    display: flex;
    max-width: 1200px;
    margin: auto;
    height: 100%;
    flex-direction: column;
    padding: 15px 0;
}

.demo-flex {
    display: flex;
    margin-bottom: 15px;
}

.demo-flex:last-of-type {
    margin-bottom: 0;
}

.demo-title {
    flex-basis: 70px;
    margin-top: 5px;
}

.demo-content {
    display: flex;
    flex: 1;
    text-align: left;
}

.demo-tab {
    flex: 1;
    margin-right: 15px;
    height: 35px;
    overflow: hidden;
}

.demo-tab span {
    display: inline-block;
    margin: 0 5px 15px 5px;
    cursor: pointer;
    padding: 5px 10px;
    color: #999999;
}

.demo-more {
    margin-top: 5px;
    cursor: pointer;
}

.demo-active {
    background-color: #09f;
    color: white !important;
    border-radius: 3px;
}

.demo-tab span:hover {
    background-color: #09f;
    color: white;
    border-radius: 3px;
}

.demo-hide {
    min-height: 35px;
    height: auto !important;
}

/* 过滤列表:end */

.result-box {
    padding-left: 86px;
    max-width: 1200px;
    text-align: left;
    margin: auto;
}
.result-box span {
    padding: 5px 15px;
    margin-right: 15px;
    border: 1px solid #ccc;
}
</style>